const path = require('path');
const webpack = require('webpack');
// 生产环境下 使用 MiniCssExtractPlugin 将样式表抽离成专门的单独文件，不依赖于 JS
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 输出 html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 每次构件清理 上次输出
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // 入口文件 从这里开始查找、打包
  entry: [
    'react-hot-loader/patch',
    './index.js',
  ],
  // 环境标识
  mode: 'production',
  // 调试工具
  devtool: 'eval-cheap-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['@babel/env'] },
      },
      {
        test: /\.css$/,
        // 多个 loader 用 use 数组按顺序加载
        use: [
          'style-loader',
          // 'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:4]&importLoaders=1',
          // 字符串或对象都可以
          {
            loader: 'css-loader',
            options: {
              // 在 css-loader 前应用的 loader 的数量
              importLoaders: 1,
              // 开启css-modules
              modules: true,
              localIdentName: '[name]_[local]_[md5:contenthash:base64:4]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // 可以使用最新 css属性， 该插件已经包含autoprefixer（根据 Can I Use 中各大厂商兼容性自动添加前缀）
                  'postcss-preset-env',
                  // 压缩
                  'cssnano',
                  // 格式化
                  'stylelint',
                  // 支持字符串 数组 CommonJS包 函数
                  // ["postcss-short", { prefix: "x" }],
                  // require.resolve("my-postcss-plugin"),
                  // myOtherPostcssPlugin({ myOption: true }),
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          // process.env.NODE_ENV === "development"?new MiniCssExtractPlugin({filename: "style_[name]_[hash].css"}):'style-loader',
          MiniCssExtractPlugin.loader,
          // "style-loader",
          'css-loader?modules&localIdentName=[name]_[local]_[md5:contenthash:base64:4]&importLoaders=1',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                  'cssnano',
                  'stylelint',
                ],
              },
            },
          },
          'less-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    // alias: {
    //   'react-dom': '@hot-loader/react-dom',
    // },
  },
  // 输出配置
  output: {
    // 打包文件输出目录
    path: path.resolve(__dirname, 'dist/'),
    // 打包输出文件名
    filename: 'bundle_[name]_[hash:8].js',
    // 打包依赖文件名
    chunkFilename: 'chunk_[name]_[contenthash:8].js',
    // 外部资源路径
    publicPath: './', // 相对于模板文件 index.html
    // publicPath: "/dist/", // 相对于服务器根目录
    // publicPath: 'https://cdn.example.com/assets/', // CDN（总是 HTTPS 协议）
    // publicPath: "//cdn.clound.com/dist/", // CDN（协议相同）
  },
  // 开发服务器配置
  devServer: {
    // index: './dist/index.html',
    port: 3000,
    // 外部资源路径
    publicPath: 'http://localhost:3000/dist/',
    hotOnly: true,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css',
      chunkFilename: '[name]_[contenthash:8].css',
    }),
    new HtmlWebpackPlugin({
      // 入口模板文件
      template: './index.html',
      // 入口模板内容
      // templateContent:'<div id="root"></div>',
      filename: 'index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};
